<html>
<head>
</head>
<script language="Javascript" src="Framework/jsGFwk.js"></script>
<script language="Javascript" src="Framework/jsGFwkIO.js"></script>
<script language="Javascript" src="Framework/jsGFwkRM.js"></script>
<script language="Javascript" src="Scripts/mapa.js"></script>
<script language="Javascript" src="Scripts/mario.js"></script>

<body>
	<canvas id="canvas" width="320" height="240"></canvas>
</body>
<script language="Javascript">
	jsGFwk.settings.canvas = "canvas";
	jsGFwk.settings.width = 320;
	jsGFwk.settings.height = 240;
	jsGFwk.settings.clearColor = "rgb(255,255,255)";
	
	//Include external component libraries
	jsGFwk.include("IO");
	jsGFwk.include("ResourceManager");
	//************************************

	jsGFwk.ResourceManager.addGraphic({ name: "sprites", source: "Graphics/misc.gif" });
        
        jsGFwk.createObject({
                id: "progress",
                visible: true,
                barWidth: 0,
                init: function() {
                        jsGFwk.ResourceManager.onResourcesLoadedCompleted = function() {
                                jsGFwk._gameObjects.progress.destroy();
                        };
                },
                update: function(delta) {
                        var a = (jsGFwk.ResourceManager._totalLoadedResources * 100) / jsGFwk.ResourceManager._totalResources;
                        this.barWidth = (a * 320) / 100;
                },
                draw: function (context) {
                        context.save();
                                context.fillStyle = "#FF0000";
                                context.fillRect(0,0, 320, 240);
                                
                                context.fillStyle = "#FFFFFF";
                                context.fillText("Loading...", 130, 110);
                                
                                context.strokeStyle = "#FFFFFF";
                                context.strokeRect(10, 160, 300, 30);
                                context.fillRect(10, 160, this.barWidth, 30);
                        context.restore();
                }
        });
	jsGFwk.createObject(mapa);
	jsGFwk.createObject(mario);
	jsGFwk.start();

</script>
</html>